<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>苏宁易购</title>
    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3551598_0eamisupy1sb.css">
    <link rel="stylesheet" href="../../public/swiper/swiper-bundle.css">
    <link rel="stylesheet" href="../../dist/css/index.css">
</head>

<body>
    <!-- 导航顶部 -->
    <div class="ng-top-toolbar">
        <div class="ng-toolbar-con">
            <!-- 第一部分导航结构 -->
            <!-- 导航left -->
            <ul class="ng-toolbar-left">
                <li>
                    <b>网站导航</b>
                    <i class="iconfont icon-xiala1"></i>
                    <!-- hover结构 -->
                    <div class="top-menu">
                        <h3>特色购物</h3>
                        <ul>
                            <li>特色购物</li>
                            <li>特色购物</li>
                            <li>特色购物</li>
                            <li>特色购物</li>
                        </ul>
                    </div>
                </li>
                <li>
                    <b>商家入驻</b>
                    <i class="iconfont icon-xiala1"></i>
                    <!-- hover结构 -->
                    <div class="top-menu">
                        商家入驻
                    </div>
                </li>
                <li>
                    <b>客户服务</b>
                    <i class="iconfont icon-xiala1"></i>
                    <!-- hover结构 -->
                    <div class="top-menu">
                        客户服务
                    </div>
                </li>
            </ul>
            <!-- 导航right -->
            <ul class="ng-toolbar-right">
                <li>
                    <b>请登录</b>

                </li>
            </ul>
        </div>
    </div>
    <!-- 内容部分 -->
    <div class="content-container">
        <!-- logo搜索栏 -->
        <div class="logo-bar">
            <div class="logo-sa">
                <h1>
                    <a>
                        <img src="https://image1.suning.cn/uimg/cms/img/159642507148437980.png" alt="">
                    </a>
                </h1>
                <div class="ng-search">
                    <div class="g-search">
                        <div class="search-box">
                            <i class="iconfont icon-fangdajing"></i>
                            <div class="search-bar">
                                <input id="search_keyword" type="text" placeholder="输入关键字搜索商品/品牌/店铺">
                                <ul id="search_list"></ul>
                                <input id="search_submit" type="submit" value="搜索">
                            </div>
                        </div>
                        <ul>
                            <li>
                                <a href="">手机</a>
                                <em>|</em>
                            </li>
                            <li>
                                <a href="">手机</a>
                                <em>|</em>
                            </li>
                            <li>
                                <a href="">手机</a>
                                <em>|</em>
                            </li>
                            <li>
                                <a href="">手机</a>
                                <em>|</em>
                            </li>
                            <li>
                                <a href="">手机</a>
                                <em>|</em>
                            </li>
                            <li>
                                <a href="">手机</a>
                                <em>|</em>
                            </li>
                            <li>
                                <a href="">手机</a>
                                <em>|</em>
                            </li>
                            <li>
                                <a href="">手机</a>
                                <em>|</em>
                            </li>
                            <li>
                                <a href="">手机</a>
                                <em>|</em>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- 分類小橫條 -->
        <div class="sort-bar">
            <div class="sort-main">
                <div class="sort-left-box">
                    <i></i>
                    <span>分類</span>
                </div>
                <div class="sort-right-box">
                    <a href="">
                        <img src="https://image1.suning.cn/uimg/cms/img/159525719075727245.png" alt="">
                    </a>
                </div>
                <!-- 分类中nav -->
                <div class="sort-center-nav">
                    <ul>
                        <li>
                            <a>
                                <img src="https://image2.suning.cn/uimg/cms/img/161185054090483911.png" alt="">
                            </a>
                        </li>
                        <li>
                            <a>蘇寧家電</a>
                        </li>
                        <li>
                            <a>手機數碼</a>
                        </li>
                        <li>
                            <a>蘇寧超市</a>
                        </li>
                        <li>
                            <a>家居建材</a>
                        </li>
                        <li>
                            <a>生活加點</a>
                        </li>
                        <li>
                            <a>幫客服務</a>
                        </li>
                        <li>
                            <a>藥品信息</a>
                        </li>
                    </ul>
                </div>
                <!-- 分类菜单 -->
                <div class="sort-list-wrapper">
                    <div class="sort-list-left-box">
                        <!-- 分类二级菜单 -->
                        <ul class="sort-hover">

                            <li> 空调</li>
                            <li>【优选空调 以旧换新至高省770】</li>
                            <li> 挂机</li>
                            <li> 柜机</li>
                            <li> 变频新风空调</li>
                            <li>移动空调</li>

                        </ul>
                        <ul class="sort-list">
                            <li>
                                <img src="https://image3.suning.cn/uimg/cms/img/165820999949428390.png" alt="">
                                <a>空调</a>
                                <em>/</em>
                                <a>冰箱</a>
                                <em>/</em>
                                <a>洗衣机</a>
                            </li>
                            <li>
                                <img src="https://image3.suning.cn/uimg/cms/img/165820999949428390.png" alt="">
                                <a>空调</a>
                                <em>/</em>
                                <a>冰箱</a>
                                <em>/</em>
                                <a>洗衣机</a>
                            </li>
                            <li>
                                <img src="https://image3.suning.cn/uimg/cms/img/165820999949428390.png" alt="">
                                <a>空调</a>
                                <em>/</em>
                                <a>冰箱</a>
                                <em>/</em>
                                <a>洗衣机</a>
                            </li>
                            <li>
                                <img src="https://image3.suning.cn/uimg/cms/img/165820999949428390.png" alt="">
                                <a>空调</a>
                                <em>/</em>
                                <a>冰箱</a>
                                <em>/</em>
                                <a>洗衣机</a>
                            </li>
                            <li>
                                <img src="https://image3.suning.cn/uimg/cms/img/165820999949428390.png" alt="">
                                <a>空调</a>
                                <em>/</em>
                                <a>冰箱</a>
                                <em>/</em>
                                <a>洗衣机</a>
                            </li>
                            <li>
                                <img src="https://image3.suning.cn/uimg/cms/img/165820999949428390.png" alt="">
                                <a>空调</a>
                                <em>/</em>
                                <a>冰箱</a>
                                <em>/</em>
                                <a>洗衣机</a>
                            </li>
                            <li>
                                <img src="https://image3.suning.cn/uimg/cms/img/165820999949428390.png" alt="">
                                <a>空调</a>
                                <em>/</em>
                                <a>冰箱</a>
                                <em>/</em>
                                <a>洗衣机</a>
                            </li>
                            <li>
                                <img src="https://image3.suning.cn/uimg/cms/img/165820999949428390.png" alt="">
                                <a>空调</a>
                                <em>/</em>
                                <a>冰箱</a>
                                <em>/</em>
                                <a>洗衣机</a>
                            </li>
                            <li>
                                <img src="https://image3.suning.cn/uimg/cms/img/165820999949428390.png" alt="">
                                <a>空调</a>
                                <em>/</em>
                                <a>冰箱</a>
                                <em>/</em>
                                <a>洗衣机</a>
                            </li>
                            <li>
                                <img src="https://image3.suning.cn/uimg/cms/img/165820999949428390.png" alt="">
                                <a>空调</a>
                                <em>/</em>
                                <a>冰箱</a>
                                <em>/</em>
                                <a>洗衣机</a>
                            </li>
                            <li>
                                <img src="https://image3.suning.cn/uimg/cms/img/165820999949428390.png" alt="">
                                <a>空调</a>
                                <em>/</em>
                                <a>冰箱</a>
                                <em>/</em>
                                <a>洗衣机</a>
                            </li>
                            <li>
                                <img src="https://image3.suning.cn/uimg/cms/img/165820999949428390.png" alt="">
                                <a>空调</a>
                                <em>/</em>
                                <a>冰箱</a>
                                <em>/</em>
                                <a>洗衣机</a>
                            </li>
                            <li>
                                <img src="https://image3.suning.cn/uimg/cms/img/165820999949428390.png" alt="">
                                <a>空调</a>
                                <em>/</em>
                                <a>冰箱</a>
                                <em>/</em>
                                <a>洗衣机</a>
                            </li>
                        </ul>

                    </div>
                    <div class="sort-list-right-box">
                        <div class="top-box">
                            <div class="user-img">
                                <a href=""></a>
                            </div>
                            <div class="login">
                                <p>Hi~ o(*￣▽￣*)ブ，欢迎欢迎...</p>
                                <p>Hi~ o(*￣▽￣*)ブ，欢迎欢迎...</p>
                                <p>Hi~ o(*￣▽￣*)ブ，欢迎欢迎...</p>
                                <p>Hi~ o(*￣▽￣*)ブ，欢迎欢迎...</p>
                                <p>Hi~ o(*￣▽￣*)ブ，欢迎欢迎...</p>
                            </div>
                        </div>
                        <div class="bot-box">
                            <ul>
                                <li>啊啊</li>
                                <li>啊啊</li>
                                <li>啊啊</li>
                                <li>啊啊</li>
                                <li>啊啊</li>
                                <li>啊啊</li>
                                <li>啊啊</li>
                                <li>啊啊</li>
                                <li>啊啊</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <!-- 轮播图结构 -->
        <div class="swiper-bar">
            <!-- bg -->
            <div class="swiper bg">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" style="background-color:#fa3440 ;">slider1</div>
                    <div class="swiper-slide" style="background-color: #f2f2f2;">slider2</div>
                    <div class="swiper-slide" style="background-color: #3b4cea;">slider3</div>
                </div>
            </div>
            <!-- main -->
            <div class="sf-bar">
                <div class="swiper main">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <img alt="家装" class="lazy-loading"
                                src="http://image4.suning.cn/uimg/cms/img/167056862466135515.png">
                        </div>
                        <div class="swiper-slide">
                            <img src="http://image4.suning.cn/uimg/cms/img/166676542441864826.png" alt="苹果"
                                class="lazy-loading">
                        </div>
                        <div class="swiper-slide">
                            <img src="https://oss.suning.com/adpp/creative_kit/material/picture/20200720-59b99b9398884daabd2e9d18424f373a711269f9c49745b2.jpg"
                                alt="苹果" class="lazy-loading">
                        </div>
                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination"></div>
    
                    <!-- 如果需要导航按钮 -->
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
    
                    <!-- 如果需要滚动条 -->
                    <div class="swiper-scrollbar"></div>
                </div>
            </div>
        </div>


        <!-- 悬浮导航结构 -->
        <div class="floatbar"
            style="position: fixed; top: 50%; left: 50%; z-index: 1000; right: auto; margin-left: -670px; margin-top: -91px; display: block;">
            <div class="float-bg">
            </div>
            <ul>
                <li>限时秒杀</li>
                <li>领券中心</li>
                <li>频道广场</li>
            </ul>
            <div class="topindex"></div>
        </div>


        <!-- 为你推荐商品 -->
        <div class="content-recommend-wrapper">
            <h2>
                <img src="https://image2.suning.cn/uimg/cms/img/159503836368389136.png" alt="">
            </h2>
            <div class="recommend-list">
                <!-- <div class="recommend-box">
                    <img src="" alt="">
                </div> -->
            </div>
        </div>
    </div>
    <!-- 底部结构 -->
    <div class="footer-container"></div>
    <script src="../../public/libs/javascripts/jQuery.js"></script>
    <script src="../../public/libs/javascripts/lazyload.js"></script>
    <script src="../../public/swiper/swiper-bundle.js"></script>
    <script src="../../dist/javascript/index.js"></script>
    <script src="../index/javascripts/search.js"></script>
</body>

</html>